<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data Visualization</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.5.0/echarts.min.js"></script>
    <script type="text/javascript" src="../js/timeouttask.js"></script>
</head>
<div th:replace="common/top"></div>
<body>

<!--滚动条div块-->
<!--<font style="font-size: 142%; color: #47d8ff; position: relative;  left: 1133px;  top: 28px;" >历史发布信息</font>-->

<!--完成七天订单数量div块-->
<section class="section">
<div class="container">
    <div class="columns">
        <div class="column">
            <div class="card">
                <div class="card-content">
                        <p class="title">14</p>
                        <p class="subtitle">包裹数量</p>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="card">
                <div class="card-content">
                    <p class="title">2</p>
                    <p class="subtitle">退货数目</p>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="card">
                <div class="card-content">
                    <p class="title">12</p>
                    <p class="subtitle">差评数</p>
                </div>
            </div>
        </div>
    </div>
    <div class="columns">
        <div class="column">
            <p class="title">近期订单数量</p>
            <div id="main" style="width: 100%;height:400px;">

            </div>
<!--            <div id="orders"></div>-->
        </div>
        <div class="column">
            <p class="title">近期营业额</p>
            <div id="sales"  style="width: 100%;height:400px;">

            </div>
        </div>
    </div>

</div>
</section>
<!--<div>-->
<!--    <div style="width: 260px">-->
<!--        <font style="font-size: 200%;  position: relative;  left: 50px;  top: 175px;color:#47d8ff" >近期营业额</font>-->
<!--    </div>-->
<!--    &lt;!&ndash; id就是js的getid      var myChart = echarts.init(document.getElementById('main'));&ndash;&gt;-->
<!--    <div id="main"></div>-->
<!--</div>-->

<!--包裹数量div块-->
<!--<div>-->
<!--    <font style="font-size: 176%; position: relative; left: 86px; top: -181px;color: #47d8ff;color:#47d8ff" >包裹数量</font>-->
<!--    <div id="AlertTaskJSs" ></div>-->
<!--</div>-->

<!--执行任务div块-->
<!--<div>-->
<!--    <font style="    font-size: 176%; position: relative;  left: 435px; top: -217px;color:#47d8ff" >退货数目</font>-->
<!--    <div  id="ExecutetaskJS"></div>-->
<!--</div>-->

<!--差评数div块-->
<!--<div>-->
<!--    <font style="font-size: 176%;position: relative;left: 750px;top: -254px;color: #47d8ff;" >差评数</font>-->
<!--    <div id="timeOutTaskJS"></div>-->
<!--</div>-->


<!--七天营业额div块-->
<!--<font style="font-size: 200%;  position: relative;  left: 237px; top: -5px;color:#47d8ff" >近期订单数量</font>-->
<!--<div id="numberOfElderly"></div>-->
<!--</body>-->


<!--营业额折线图js-->
<script type="text/javascript">
    window.onload = async function () {
        let sales_data = await fetch("/order/showLine").then(res => res.json()).then(res => {
            return res;
        });
        console.log(sales_data);

        let orders_chart = echarts.init(document.getElementById("main"));
        orders_chart.setOption({
            // title: {
            //     text: '近期订单数量'
            // },
            tooltip: {},
            xAxis: {
                data: sales_data.map(x => x.orderDate)
            },
            yAxis: {},
            series: [
                {
                    lineStyle: {
                        color: '#3273dc'
                    },
                    name: '订单数量',
                    type: 'bar',
                    data: sales_data.map(x => x.orderSales)
                }
            ]
        });
        let orderAmount = await fetch("/order/showOrderAmount").then(res => res.json()).then(res => {
            return res;
        });
        console.log(orderAmount);
        console.log(orderAmount.map(x => x.orderDate))
        let sales_chart = echarts.init(document.getElementById("sales"));
        let sales_option = {
            xAxis: {
                data: orderAmount.map(x => x.orderDate),
                // axisLine: {
                //     show: true,
                //
                // },
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: orderAmount.map(x => x.orderAmount),
                    type: 'line',
                    lineStyle: {
                        color: '#3273dc'
                    },
                    itemStyle : { color: '#3273dc', normal: {label : {show: true}}}
                }
            ]
        };
        sales_chart.setOption(sales_option);
    }

    //
    $(document).ready(function () {
        var myChart = echarts.init(document.getElementById('orders'));
    //     //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        var names = [];    //横坐标数组（实际用来盛放X轴坐标值）
        var values = [];    //纵坐标数组（实际用来盛放Y坐标值）
        $.ajax({
            type: "post",
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: "/order/showLine",    //请求发送到dataActiont处
            data: {},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].orderDate);
                        values.push(result[i].orderSales);
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({
                        //加载数据图表
                        title: {
                            text: '营业额统计图',
                            top: 32,
                            left: 18,
                            textStyle: {
                                // color: '#00F6FF',
                                fontSize: 24
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: 0,
                            right: 0,
                            bottom: '6%',
                            top: 90,
                            containLabel: true
                        },
                        xAxis: {

                            data: names,
                            boundaryGap: false,
                            axisLabel: {
                                fontSize: 10
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'white'
                                }
                            },
                            offset: 20,
                            axisTick: {
                                show: false,
                                length: 9,
                                alignWithLabel: true,
                                lineStyle: {
                                    color: '#7DFFFD'
                                }
                            }

                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: 'white'
                                }
                            },

                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                fontSize: 16
                            },
                            boundaryGap: ['20%', '20%']
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '营业额',
                            type: 'line',
                            data: values,
                            fontSize: 16,
                            color: '#38ff9f',
                            offset: [4, -25]
                        }]

                    });

                }

            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
    });
   myChart.setOption(option);
</script>

<!--包裹数量js-->
<!--<script>-->
<!--    var AlertTaskJS = echarts.init(document.getElementById('AlertTaskJSs'));-->
<!--    let angle = 1;//角度，用来做简单的动画效果的-->
<!--    let value = 14;-->
<!--    optionOne = {-->
<!--        // backgroundColor:"#010d3a",-->
<!--        title: {-->
<!--            text: '{a|'+ value +'}{c|}',-->
<!--            x: 'center',-->
<!--            y: 'center',-->
<!--            textStyle: {-->
<!--                rich:{-->
<!--                    a: {-->
<!--                        fontSize: 48,-->
<!--                        color: '#29EEF3'-->
<!--                    },-->

<!--                    c: {-->
<!--                        fontSize: 20,-->
<!--                        color: '#ffffff',-->
<!--                        // padding: [5,0]-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--        },-->

<!--        series: [ {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,-->
<!--                        startAngle: (0+angle) * Math.PI / 180,-->
<!--                        endAngle: (90+angle) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,-->
<!--                        startAngle: (180+angle) * Math.PI / 180,-->
<!--                        endAngle: (270+angle) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,-->
<!--                        startAngle: (270+-angle) * Math.PI / 180,-->
<!--                        endAngle: (40+-angle) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,-->
<!--                        startAngle: (90+-angle) * Math.PI / 180,-->
<!--                        endAngle: (220+-angle) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        },{-->
<!--            name: "ring5",  //绿点-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                let x0 = api.getWidth() / 2;-->
<!--                let y0 = api.getHeight() / 2;-->
<!--                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;-->
<!--                let point = getCirlPoint(x0, y0, r, (270+-angle))-->
<!--                return {-->
<!--                    type: 'circle',-->
<!--                    shape: {-->
<!--                        cx: point.x,-->
<!--                        cy: point.y,-->
<!--                        r: 4-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",      //绿-->
<!--                        fill: "#0CD3DB"-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->

<!--            type: 'pie',-->
<!--            radius: ['58%', '45%'],-->
<!--            silent: true,-->
<!--            clockwise: true,-->
<!--            startAngle: 90,-->
<!--            z: 0,-->
<!--            zlevel: 0,-->
<!--            label: {-->
<!--                normal: {-->
<!--                    position: "center",-->

<!--                }-->
<!--            },-->
<!--            data: [{-->
<!--                value: value,-->
<!--                name: "",-->
<!--                itemStyle: {-->
<!--                    normal: {-->
<!--                        color: { // 完成的圆环的颜色-->
<!--                            colorStops: [{-->
<!--                                offset: 0,-->
<!--                                color: '#4FADFD' // 0% 处的颜色-->
<!--                            }, {-->
<!--                                offset: 1,-->
<!--                                color: '#28E8FA' // 100% 处的颜色-->
<!--                            }]-->
<!--                        },-->
<!--                    }-->
<!--                }-->
<!--            },-->
<!--                {-->
<!--                    value: 100-value,-->
<!--                    name: "",-->
<!--                    label: {-->
<!--                        normal: {-->
<!--                            show: false-->
<!--                        }-->
<!--                    },-->
<!--                    itemStyle: {-->
<!--                        normal: {-->
<!--                            color: "#173164"-->
<!--                        }-->
<!--                    }-->
<!--                }-->
<!--            ]-->
<!--        },-->

<!--            {-->
<!--                name: "",-->
<!--                type: "gauge",-->
<!--                radius: "58%",-->
<!--                center: ['50%', '50%'],-->
<!--                startAngle: 0,-->
<!--                endAngle: 359.9,-->
<!--                splitNumber: 8,-->
<!--                hoverAnimation: true,-->
<!--                axisTick: {-->
<!--                    show: false-->
<!--                },-->
<!--                splitLine: {-->
<!--                    length: 60,-->
<!--                    lineStyle: {-->
<!--                        width: 5,-->
<!--                        color: "#061740"-->
<!--                    }-->
<!--                },-->
<!--                axisLabel: {-->
<!--                    show: false-->
<!--                },-->
<!--                pointer: {-->
<!--                    show: false-->
<!--                },-->
<!--                axisLine: {-->
<!--                    lineStyle: {-->
<!--                        opacity: 0-->
<!--                    }-->
<!--                },-->
<!--                detail: {-->
<!--                    show: false-->
<!--                },-->
<!--                data: [{-->
<!--                    value: 0,-->
<!--                    name: ""-->
<!--                }]-->
<!--            },-->

<!--        ]-->
<!--    };-->

<!--    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)-->
<!--    function getCirlPoint(x0, y0, r, angle) {-->
<!--        let x1 = x0 + r * Math.cos(angle* Math.PI / 180)-->
<!--        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)-->
<!--        return {-->
<!--            x: x1,-->
<!--            y: y1-->
<!--        }-->
<!--    }-->

<!--    function draw(){-->
<!--        angle = angle+11-->
<!--        AlertTaskJS.setOption(optionOne, true)-->
<!--        //window.requestAnimationFrame(draw);-->
<!--    }-->

<!--    setInterval(function() {-->
<!--        //用setInterval做动画感觉有问题-->
<!--        draw()-->
<!--    }, 100);-->

<!--    AlertTaskJS.setOption(optionOne);-->
<!--</script>-->

<!--退货数目js-->
<!--<script>-->
<!--    var ExecutetaskJSS = echarts.init(document.getElementById('ExecutetaskJS'));-->
<!--    let angle1 = 0;//角度，用来做简单的动画效果的-->
<!--    let value1 = 2;-->
<!--    optionTwo = {-->
<!--        // backgroundColor:"#010d3a",-->
<!--        title: {-->
<!--            text: '{a|'+ value1 +'}{c|}',-->
<!--            x: 'center',-->
<!--            y: 'center',-->
<!--            textStyle: {-->
<!--                rich:{-->
<!--                    a: {-->
<!--                        fontSize: 48,-->
<!--                        color: '#29EEF3'-->
<!--                    },-->

<!--                    c: {-->
<!--                        fontSize: 20,-->
<!--                        color: '#ffffff',-->
<!--                        // padding: [5,0]-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--        },-->

<!--        series: [ {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,-->
<!--                        startAngle: (0+angle1) * Math.PI / 180,-->
<!--                        endAngle: (90+angle1) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,-->
<!--                        startAngle: (180+angle1) * Math.PI / 180,-->
<!--                        endAngle: (270+angle1) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,-->
<!--                        startAngle: (270+-angle1) * Math.PI / 180,-->
<!--                        endAngle: (40+-angle1) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,-->
<!--                        startAngle: (90+-angle1) * Math.PI / 180,-->
<!--                        endAngle: (220+-angle1) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                let x0 = api.getWidth() / 2;-->
<!--                let y0 = api.getHeight() / 2;-->
<!--                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;-->
<!--                let point = getCirlPoint(x0, y0, r, (90+-angle1))-->
<!--                return {-->
<!--                    type: 'circle',-->
<!--                    shape: {-->
<!--                        cx: point.x,-->
<!--                        cy: point.y,-->
<!--                        r: 4-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",//粉-->
<!--                        fill: "#0CD3DB"-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",  //绿点-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function(params, api) {-->
<!--                let x0 = api.getWidth() / 2;-->
<!--                let y0 = api.getHeight() / 2;-->
<!--                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;-->
<!--                let point = getCirlPoint(x0, y0, r, (270+-angle1))-->
<!--                return {-->
<!--                    type: 'circle',-->
<!--                    shape: {-->
<!--                        cx: point.x,-->
<!--                        cy: point.y,-->
<!--                        r: 4-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",      //绿-->
<!--                        fill: "#0CD3DB"-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->

<!--            type: 'pie',-->
<!--            radius: ['58%', '45%'],-->
<!--            silent: true,-->
<!--            clockwise: true,-->
<!--            startAngle: 90,-->
<!--            z: 0,-->
<!--            zlevel: 0,-->
<!--            label: {-->
<!--                normal: {-->
<!--                    position: "center",-->

<!--                }-->
<!--            },-->
<!--            data: [{-->
<!--                value: value,-->
<!--                name: "",-->
<!--                itemStyle: {-->
<!--                    normal: {-->
<!--                        color: { // 完成的圆环的颜色-->
<!--                            colorStops: [{-->
<!--                                offset: 0,-->
<!--                                color: '#4FADFD' // 0% 处的颜色-->
<!--                            }, {-->
<!--                                offset: 1,-->
<!--                                color: '#28E8FA' // 100% 处的颜色-->
<!--                            }]-->
<!--                        },-->
<!--                    }-->
<!--                }-->
<!--            },-->
<!--                {-->
<!--                    value: 100-value,-->
<!--                    name: "",-->
<!--                    label: {-->
<!--                        normal: {-->
<!--                            show: false-->
<!--                        }-->
<!--                    },-->
<!--                    itemStyle: {-->
<!--                        normal: {-->
<!--                            color: "#173164"-->
<!--                        }-->
<!--                    }-->
<!--                }-->
<!--            ]-->
<!--        },-->

<!--            {-->
<!--                name: "",-->
<!--                type: "gauge",-->
<!--                radius: "58%",-->
<!--                center: ['50%', '50%'],-->
<!--                startAngle: 0,-->
<!--                endAngle: 359.9,-->
<!--                splitNumber: 8,-->
<!--                hoverAnimation: true,-->
<!--                axisTick: {-->
<!--                    show: false-->
<!--                },-->
<!--                splitLine: {-->
<!--                    length: 60,-->
<!--                    lineStyle: {-->
<!--                        width: 5,-->
<!--                        color: "#061740"-->
<!--                    }-->
<!--                },-->
<!--                axisLabel: {-->
<!--                    show: false-->
<!--                },-->
<!--                pointer: {-->
<!--                    show: false-->
<!--                },-->
<!--                axisLine: {-->
<!--                    lineStyle: {-->
<!--                        opacity: 0-->
<!--                    }-->
<!--                },-->
<!--                detail: {-->
<!--                    show: false-->
<!--                },-->
<!--                data: [{-->
<!--                    value: 0,-->
<!--                    name: ""-->
<!--                }]-->
<!--            },-->

<!--        ]-->
<!--    };-->

<!--    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)-->
<!--    function getCirlPoint(x0, y0, r, angle1) {-->
<!--        let x1 = x0 + r * Math.cos(angle1 * Math.PI / 180)-->
<!--        let y1 = y0 + r * Math.sin(angle1 * Math.PI / 180)-->
<!--        return {-->
<!--            x: x1,-->
<!--            y: y1-->
<!--        }-->
<!--    }-->

<!--    function draw1(){-->
<!--        angle1 = angle1+11-->
<!--        ExecutetaskJSS.setOption(optionTwo, true)-->
<!--        //window.requestAnimationFrame(draw);-->
<!--    }-->

<!--    setInterval(function() {-->
<!--        //用setInterval做动画感觉有问题-->
<!--        draw1()-->
<!--    }, 100);-->
<!--    ExecutetaskJSS.setOption(optionTwo);-->
<!--</script>-->

<!--差评-->
<!--<script>-->

<!--    var timeOutTask = echarts.init(document.getElementById('timeOutTaskJS'));-->
<!--    let angle2 = 0;//角度，用来做简单的动画效果的-->
<!--    let value2 = 12;-->
<!--    optionTask = {-->
<!--        // backgroundColor: "#010d3a",-->
<!--        title: {-->
<!--            text: '{a|' + value2 + '}{c|}',-->
<!--            x: 'center',-->
<!--            y: 'center',-->
<!--            textStyle: {-->
<!--                rich: {-->
<!--                    a: {-->
<!--                        fontSize: 48,-->
<!--                        color: '#29EEF3'-->
<!--                    },-->

<!--                    c: {-->
<!--                        fontSize: 20,-->
<!--                        color: '#ffffff',-->
<!--                        // padding: [5,0]-->
<!--                    }-->
<!--                }-->
<!--            }-->
<!--        },-->

<!--        series: [{-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function (params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,-->
<!--                        startAngle: (0 + angle2) * Math.PI / 180,-->
<!--                        endAngle: (90 + angle2) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function (params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,-->
<!--                        startAngle: (180 + angle2) * Math.PI / 180,-->
<!--                        endAngle: (270 + angle2) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function (params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,-->
<!--                        startAngle: (270 + -angle2) * Math.PI / 180,-->
<!--                        endAngle: (40 + -angle2) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function (params, api) {-->
<!--                return {-->
<!--                    type: 'arc',-->
<!--                    shape: {-->
<!--                        cx: api.getWidth() / 2,-->
<!--                        cy: api.getHeight() / 2,-->
<!--                        r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,-->
<!--                        startAngle: (90 + -angle2) * Math.PI / 180,-->
<!--                        endAngle: (220 + -angle2) * Math.PI / 180-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",-->
<!--                        fill: "transparent",-->
<!--                        lineWidth: 1.5-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function (params, api) {-->
<!--                let x0 = api.getWidth() / 2;-->
<!--                let y0 = api.getHeight() / 2;-->
<!--                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;-->
<!--                let point = getCirlPoint(x0, y0, r, (90 + -angle1))-->
<!--                return {-->
<!--                    type: 'circle',-->
<!--                    shape: {-->
<!--                        cx: point.x,-->
<!--                        cy: point.y,-->
<!--                        r: 4-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",//粉-->
<!--                        fill: "#0CD3DB"-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->
<!--            name: "ring5",  //绿点-->
<!--            type: 'custom',-->
<!--            coordinateSystem: "none",-->
<!--            renderItem: function (params, api) {-->
<!--                let x0 = api.getWidth() / 2;-->
<!--                let y0 = api.getHeight() / 2;-->
<!--                let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;-->
<!--                let point = getCirlPoint(x0, y0, r, (270 + -angle1))-->
<!--                return {-->
<!--                    type: 'circle',-->
<!--                    shape: {-->
<!--                        cx: point.x,-->
<!--                        cy: point.y,-->
<!--                        r: 4-->
<!--                    },-->
<!--                    style: {-->
<!--                        stroke: "#0CD3DB",      //绿-->
<!--                        fill: "#0CD3DB"-->
<!--                    },-->
<!--                    silent: true-->
<!--                };-->
<!--            },-->
<!--            data: [0]-->
<!--        }, {-->

<!--            type: 'pie',-->
<!--            radius: ['58%', '45%'],-->
<!--            silent: true,-->
<!--            clockwise: true,-->
<!--            startAngle: 90,-->
<!--            z: 0,-->
<!--            zlevel: 0,-->
<!--            label: {-->
<!--                normal: {-->
<!--                    position: "center",-->

<!--                }-->
<!--            },-->
<!--            data: [{-->
<!--                value: value,-->
<!--                name: "",-->
<!--                itemStyle: {-->
<!--                    normal: {-->
<!--                        color: { // 完成的圆环的颜色-->
<!--                            colorStops: [{-->
<!--                                offset: 0,-->
<!--                                color: '#4FADFD' // 0% 处的颜色-->
<!--                            }, {-->
<!--                                offset: 1,-->
<!--                                color: '#28E8FA' // 100% 处的颜色-->
<!--                            }]-->
<!--                        },-->
<!--                    }-->
<!--                }-->
<!--            },-->
<!--                {-->
<!--                    value: 100 - value,-->
<!--                    name: "",-->
<!--                    label: {-->
<!--                        normal: {-->
<!--                            show: false-->
<!--                        }-->
<!--                    },-->
<!--                    itemStyle: {-->
<!--                        normal: {-->
<!--                            color: "#173164"-->
<!--                        }-->
<!--                    }-->
<!--                }-->
<!--            ]-->
<!--        },-->

<!--            {-->
<!--                name: "",-->
<!--                type: "gauge",-->
<!--                radius: "58%",-->
<!--                center: ['50%', '50%'],-->
<!--                startAngle: 0,-->
<!--                endAngle: 359.9,-->
<!--                splitNumber: 8,-->
<!--                hoverAnimation: true,-->
<!--                axisTick: {-->
<!--                    show: false-->
<!--                },-->
<!--                splitLine: {-->
<!--                    length: 60,-->
<!--                    lineStyle: {-->
<!--                        width: 5,-->
<!--                        color: "#061740"-->
<!--                    }-->
<!--                },-->
<!--                axisLabel: {-->
<!--                    show: false-->
<!--                },-->
<!--                pointer: {-->
<!--                    show: false-->
<!--                },-->
<!--                axisLine: {-->
<!--                    lineStyle: {-->
<!--                        opacity: 0-->
<!--                    }-->
<!--                },-->
<!--                detail: {-->
<!--                    show: false-->
<!--                },-->
<!--                data: [{-->
<!--                    value: 0,-->
<!--                    name: ""-->
<!--                }]-->
<!--            },-->

<!--        ]-->
<!--    };-->

<!--    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)-->
<!--    function getCirlPoint(x0, y0, r, angle1) {-->
<!--        let x1 = x0 + r * Math.cos(angle1 * Math.PI / 180)-->
<!--        let y1 = y0 + r * Math.sin(angle1 * Math.PI / 180)-->
<!--        return {-->
<!--            x: x1,-->
<!--            y: y1-->
<!--        }-->
<!--    }-->

<!--    function draw2() {-->
<!--        angle2 = angle2+11-->
<!--        timeOutTask.setOption(optionTask, true)-->
<!--        //window.requestAnimationFrame(draw);-->
<!--    }-->

<!--    setInterval(function () {-->
<!--        //用setInterval做动画感觉有问题-->
<!--        draw2()-->
<!--    }, 100);-->
<!--    timeOutTask.setOption(optionTask);-->
<!--</script>-->


<!--订单数量js-->
<!--<script>-->

<!--    $(document).ready(function () {-->
<!--        var myChart = echarts.init(document.getElementById('orders'));-->
<!--        //数据加载完之前先显示一段简单的loading动画-->
<!--        myChart.showLoading();-->
<!--        var names = [];    //横坐标数组（实际用来盛放X轴坐标值）-->
<!--        var values = [];    //纵坐标数组（实际用来盛放Y坐标值）-->
<!--        $.ajax({-->
<!--            type: "post",-->
<!--            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）-->
<!--            url: "/order/showOrderAmount",    //请求发送到dataActiont处-->
<!--            data: {},-->
<!--            dataType: "json",        //返回数据形式为json-->
<!--            success: function (result) {-->
<!--                if (result) {-->
<!--                    for (var i = 0; i < result.length; i++) {-->
<!--                        names.push(result[i].orderDate);-->
<!--                        values.push(result[i].orderAmount);-->
<!--                    }-->
<!--                    myChart.hideLoading();    //隐藏加载动画-->
<!--                    myChart.setOption({-->
<!--                        //加载数据图表-->
<!--                        title: {-->
<!--                            text: '订单数量统计图',-->
<!--                            top: 32,-->
<!--                            left: 18,-->
<!--                            textStyle: {-->
<!--                                color: '#00F6FF',-->
<!--                                fontSize: 24-->
<!--                            }-->
<!--                        },-->
<!--                        tooltip: {-->
<!--                            trigger: 'axis',-->
<!--                            formatter: "{b} : {c}",-->
<!--                            axisPointer: { // 坐标轴指示器，坐标轴触发有效-->
<!--                                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'-->
<!--                            }-->
<!--                        },-->
<!--                        grid: {-->
<!--                            left: 20,-->
<!--                            right: 0,-->
<!--                            bottom: '0%',-->
<!--                            top: -5,-->
<!--                            containLabel: true-->
<!--                        },-->
<!--                        xAxis: {-->

<!--                            data: names,-->
<!--                            boundaryGap: false,-->

<!--                            axisLine: {-->
<!--                                lineStyle: {-->
<!--                                    color: '#3eb2e8'-->
<!--                                }-->
<!--                            },-->
<!--                            //坐标值标注-->
<!--                            axisLabel: {-->
<!--                                interval: 0,-->
<!--                                show: true,-->
<!--                                textStyle: {-->
<!--                                    color: '#fff',-->
<!--                                }-->
<!--                            }-->

<!--                        },-->
<!--                        toolbox: {-->
<!--                            feature: {-->
<!--                                saveAsImage: {}-->
<!--                            }-->
<!--                        },-->
<!--                        yAxis: {-->
<!--                            type: 'value',-->
<!--                            //坐标轴-->
<!--                            axisLine: {-->
<!--                                show: false-->
<!--                            },-->
<!--                            //坐标值标注-->
<!--                            axisLabel: {-->
<!--                                show: false,-->
<!--                                textStyle: {-->
<!--                                    color: '#fff',-->
<!--                                }-->
<!--                            },-->
<!--                            //分格线-->
<!--                            splitLine: {-->
<!--                                lineStyle: {-->
<!--                                    color: '#4784e8'-->
<!--                                }-->
<!--                            }-->
<!--                        },-->
<!--                        series: [{-->
<!--                            // 根据名字对应到相应的系列-->
<!--                            name: '订单数量',-->
<!--                            type: 'bar',-->
<!--                            data: values,-->
<!--                            //barWidth: 27,-->
<!--                            itemStyle: {-->
<!--                                normal: {-->
<!--                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{-->
<!--                                        offset: 0,-->
<!--                                        color: "#0B4EC3" // 0% 处的颜色-->
<!--                                    }, {-->
<!--                                        offset: 0.6,-->
<!--                                        color: "#138CEB" // 60% 处的颜色-->
<!--                                    }, {-->
<!--                                        offset: 1,-->
<!--                                        color: "#17AAFE" // 100% 处的颜色-->
<!--                                    }], false)-->
<!--                                }-->
<!--                            },-->
<!--                            barGap: 0-->

<!--                        }]-->

<!--                    });-->

<!--                }-->

<!--            },-->
<!--            error: function (errorMsg) {-->
<!--                //请求失败时执行该函数-->
<!--                alert("图表请求数据失败!");-->
<!--                myChart.hideLoading();-->
<!--            }-->
<!--        });-->
<!--    });-->
<!--       // numberOfElderlyyu.setOption(optiontasks);-->
<!--</script>-->
</body>
</html>
